<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="Content-Type"content="text/html;charset=gb2312">
    <title>Title</title>
    <style>
        body{
            background: url("../image/b.jpg");
            background-attachment: fixed;
            background-size: cover;
            background-repeat: no-repeat;

        }
        input {
            /*背景色覆盖*/
            border: none; /* 移除边框 */
            background-color: transparent; /* 设置背景色为透明 */
            outline: none; /* 移除聚焦时的轮廓线 */
            padding: 5px; /* 可选：添加内边距 */
        }
        .m{
            position: absolute;
            margin: 20% 40% auto;
        }
        span {
            display: inline-block;
            width: 150px;

            text-align: right;
        }
        .container {
            width: 40%;
            margin: 20px auto;
        }

    </style>
    <link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css">
    <script src="https://code.jquery.com/jquery-3.3.1.min.js"rel="external nofollow"></script>

</head>
<body>
<div class="m">
<form action="../shift"method="post"id="form" class="container">
    <table  border="1">
        <tr>
            <td colspan="2">用户名： <input type="text" id="username" name="username"><span id="showinfo"></span></td>
        </tr>
        <tr>
            <td colspan="2">密码：<input type="password"id="password"name="password"><span id="showwinfo"></span></td>
        </tr>
        <tr class="btn-group">
            <td ><input type="submit" value="修改"class="btn btn-success btn-group-lg "></td>
            <td><a href="../index.html"class="btn btn-success btn-group-lg ">重新登录</a></td>
        </tr>
    </table>
</form>
</div>
<script>
    $(function () {
        $("#username").blur(function (){
            var username=$(this).val();
            if(username=="") {
                $("#showinfo").html("内容不能为空！");
                return;
            }
            $.ajax({
                url:'queryloginname',
                type:'POST',
                dataType:'HTML',
                data:{
                    username:username,
                    arg:Math.random()
                },
                success: function (returndata){
                    if(returndata=='true'){
                        $("#showinfo").html("用户名存在！");
                    }else{
                        $("#showinfo").html("用户名不存在！");
                    }
                }
            });
        });
        $("#password").blur(function (){
            var username=$("#username").val();
            var password=$(this).val();
            if(password=="") {
                $("#showwinfo").html("内容不能为空！");
                return;
            }
        });
    });

</script>

</body>
</html>